﻿/*menu ngang kiểu ul*/

/*#region Animation*/
@-webkit-keyframes my-ul-menu-show {
    0% {
        opacity: 0;
        left: 20%;
    }

    100% {
        opacity: 1;
        left: 0;
    }
}

@-moz-keyframes my-ul-menu-show{
    0% {
        opacity: 0;
        left: 20%;
    }

    100% {
        opacity: 1;
        left: 0;
    }
}

@-ms-keyframes my-ul-menu-show{
    0% {
        opacity: 0;
        left: 20%;
    }

    100% {
        opacity: 1;
        left: 0;
    }
}

@keyframes my-ul-menu-show{
   0% {
        opacity: 0;
        left: 20%;
    }

    100% {
        opacity: 1;
        left: 0;
    }
}
/*#endregion*/

ul.my-ul-menu a {
    display: block; /*inline -> text*/
    white-space: nowrap; /*không wrap text*/
    text-decoration: none;
}

ul.my-ul-menu > li {
    float: left;
    display: inline-block;
    position: relative; /*quan hệ ul con*/
}

    ul.my-ul-menu > li > a {
    }

    ul.my-ul-menu > li > ul {
        display: none; /*ẩn menu con*/
        position: absolute;
        left: 0;
        top: 60px;
        min-width: 100%;
    }

    ul.my-ul-menu > li:hover ul > li,
    ul.my-ul-menu > li:hover ul > li > a {
        min-width: 100%;
    }

    /*#region hiện menu*/
    /*dấu trigger sổ xuống, thẻ a đầu tiên và thẻ a 2 cấp nữa*/
    /*lồng nhau http://mcdlr.com/8/*/
    ul.my-ul-menu > li a:first-child:nth-last-child(2):after {
        content: "\25BC"; /*hiển thị dấu đi xuống*/
        margin-left: 5px;
        font-size: 10px;
    }

    ul.my-ul-menu > li:hover a:first-child:nth-last-child(2):after {
        content: "\25b2"; /*Hiển thị dấu đi lên*/
    }

    ul.my-ul-menu > li:hover ul {
        display: block; /*hiển thị menu con*/
        z-index: 99;
        -webkit-animation: my-ul-menu-show .2s linear;
        -moz-animation: my-ul-menu-show .2s linear;
        -o-animation: my-ul-menu-show .2s linear;
        animation: my-ul-menu-show .2s linear;
    }
/*#endregion*/


@media screen and (max-width: 768px) {
    ul.my-ul-menu {
        width: 100%; /*full width màn hình*/
    }

    ul.my-ul-menu a {
        
    }

    ul.my-ul-menu > li {
        width: 100%;
    }

        ul.my-ul-menu > li > a {
            width: 100%;
        }

        /*menu con thục vào, hiển thị cùng cha*/
        ul.my-ul-menu > li > ul {
            display: block;
            position: static; 
            padding-left: 15px;
        }
    /*#endregion*/

}